<template>
<div id="bo">
<div class="container switch">

        <div class="container-form container-signup" id="form2">
            <form action="" class="form">
                <h2 class="form-title">教师登录</h2>
                <input type="text" placeholder="用户名" class="input" id="teacherNum" v-model="teacherLoginNumber">
                <input type="password" placeholder="密码" class="input" id="teacherPaw" v-model="teacherLoginPassword">
                <a href="javascript:void(0);">忘记密码</a>

                <button class="submit2" id="teacherLogin" @click.prevent="teacherLogin">登录</button>
                <div class="submit2" id="fadeIn2" >注册</div>


            </form>
        </div>
        <div class="stu-register">
            <form action="" class="form">
                <h2 class="form-title">学生注册</h2>
                <input type="text" placeholder="用户名" class="input" v-model="studentRegisterNumber">
                <input type="password" placeholder="密码" class="input" v-model="studentRegisterPassword">
                <a href="javascript:void(0);">忘记密码</a>
                <div id="fadeOut" class="submit2"  @click="studentRegister">注册</div>


            </form>
        </div>
        <!-- 登录页面 -->
        <div class="container-form container-signin">
            <form action="javascript:void(0);" class="form">
                <h2 class="form-title">学生登录</h2>
                <input type="text" placeholder="用户名" class="input" v-model="studentLoginNumber">
                <input type="password" placeholder="密码" class="input" v-model="studentLoginPassword">
                <a href="javascript:void(0);">忘记密码</a>

                <button class="submit2"  @click.prevent="studentLogin">登录</button>
                <button class="submit2" id="fadeIn">注册</button>

            </form>
        </div>
        <div class="tea-register">
            <form action="" class="form">
                <h2 class="form-title">教师注册</h2>
                <input type="text" placeholder="用户名" class="input" id="teacherRegisterNum" v-model="teacherRegisterNumber">
                <input type="password" placeholder="密码" class="input" id="teacherRegisterPas" v-model="teacherRegisterPassword">
                <a href="javascript:void(0);">忘记密码</a>
                <div class="submit2" id="fadeOut2" @click.prevent="teacherRegister">注册</div>

            </form>
        </div>
        <!-- 覆盖层 -->
        <div class="container-overlay">
            <div class="overlay">
                <div class="overlay-slide overlay-left">
                    <button class="submit" id="goSignIn">学生登录</button>
                </div>
                <div class="overlay-slide overlay-right">
                    <button class="submit" id="goSignUp">教师登录</button>
                </div>
            </div>
        </div>
         
    </div>
</div>


    <!-- <input v-model="userName" placeholder="请输入姓名" autocomplete />
    <input v-model="password" placeholder="请输入年龄" autocomplete />
    <button v-on:click="addUser">提交</button>

    <p id="t">这是查询按钮</p>
    <p>
      <button @click="changeMsg">点击</button>
      <button @click="delMsg">删除</button>
      <button @click="queryMsg">登录</button>
    </p> -->


</template>

<script>
import axios from "axios";
import login from '../assets/js/login'
export default {
  name: "login",
  data() {
    return {
      teacherLoginNumber:'',
      teacherLoginPassword:'',
      teacherRegisterNumber:'',
      teacherRegisterPassword:'',
      studentLoginNumber:'',
      studentLoginPassword:'',
      studentRegisterNumber:'',
      studentRegisterPassword:'',
    };
  },
  methods: {
    teacherRegister() {
      console.log('111');
      let name = this.teacherRegisterNumber;
      let password = this.teacherRegisterPassword;
      if (name && password) {
        axios
          .post(
            "http://localhost:3000/api/user/teacherRegister",
            {
              username: name,
              password: password,
            })
          .then((response) => {
            console.log(response);
            console.log("--------");
            if (response.data.code == 200) {
              alert("注册成功");
            } else {
              alert(response.data.message);
            }
          });
      }
      else {
        alert("用户名密码不能为空");
      }
      return false;
    },
    teacherLogin() {
      let name = this.teacherLoginNumber;
      let password = this.teacherLoginPassword;
      this.teacherLoginNumber=[]
      this.teacherLoginPassword=[];
      if (name && password) {
        axios
          .post("http://localhost:3000/api/user/teacherLogin", {
            username: name,
            password: password,
          })
          .then((response) => {
            console.log(response);
            console.log("--------");
            if (response.data.code == 200) {
              alert("登录成功");
              this.$router.push({
                name:'index',
                query:{username:name,identity:"teacher"}
              })
            } else {
              alert(response.data.message);
            }
          });
      } else {
        alert("用户名密码不能为空");
      }
      return false;
    },
    studentRegister() {
      let name = this.studentRegisterNumber;
      let password = this.studentRegisterPassword;
      
      if (name && password) {
        axios
          .post(
            "http://localhost:3000/api/user/studentRegister",
            {
              username: name,
              password: password,
            })
          .then((response) => {
            console.log(response);
            console.log("--------");
            if (response.data.code == 200) {
              alert("注册成功");
            } else {
              alert(response.data.message);
            }
          });
      }
      else {
        alert("用户名密码不能为空");
      }
      return false;
    },
    studentLogin() {
      let name = this.studentLoginNumber;
      let password = this.studentLoginPassword;
      this.studentRegisterNumber=[]
      this.studentRegisterPassword=[];
      if (name && password) {
        axios
          .post("http://localhost:3000/api/user/studentLogin", {
            username: name,
            password: password,
          })
          .then((response) => {
            console.log(response);
            console.log("--------");
            if (response.data.code == 200) {
              alert("登录成功");
              this.$router.push({
                name:'index',
                query:{username:name,identity:"student"}
              })
              
            } else {
              alert(response.data.message);
            }
          });
      } else {
        alert("用户名密码不能为空");
      }
      
      return false;
    },
    // changeMsg() {
    //   //  $('#t').hide();
    //   axios.get("http://localhost:3000/api/user/query").then((response) => {
    //     console.log(response);
    //     console.log("--------");
        
    //   });
    //   // $('#t').hide();
    // },

    // delMsg() {
    //   let name = this.userName;
    //   let password = this.password;
    //   console.log(name);
    //   axios
    //     .post("http://localhost:3000/api/user/delUser", {
    //       username: name,
    //       password: password,
    //     })
    //     .then((response) => {
    //       console.log(response);
    //       console.log("--------");
    //     });
    //     return false;
    // },
  },
  mounted(){
      login
  }
};
</script>

<style scoped>

/* 清除所有元素内外边距 转换为c3盒子模型 */

@import'../assets/css/Login.css';
</style>